<template>
  <el-dialog title="客户选择" width="1000px" :visible.sync="open" @close="handleClose">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form ref="MdItemform" :model="MdItemform" label-width="100px" :inline="true">
          <el-form-item label="客户编码" prop="clientCode">
            <el-input v-model="MdItemform.clientCode" placeholder="请输入客户编码"/>
          </el-form-item>
          <el-form-item label="客户名称" prop="clientName">
            <el-input v-model="MdItemform.clientName" placeholder="请输入客户名称"/>
          </el-form-item>
          <el-form-item label="客户简称" prop="clientNick">
            <el-input v-model="MdItemform.clientNick" placeholder="请输入客户简称"/>
          </el-form-item>
          <el-form-item label="客户英文名称" prop="clientEn">
            <el-input v-model="MdItemform.clientEn" placeholder="客户英文名称"/>
          </el-form-item>
          <el-form-item label="是否启用" prop="enableFlag">
            <el-input v-model="MdItemform.enableFlag" placeholder="是否启用"/>
          </el-form-item>

          <el-form-item style="margin-left: 31px;">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="getMdItemList">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table :data="postList" @selection-change="handleSelectionChange" ref="singleTable">
          <el-table-column width="30" align="center">
            <template slot-scope="scope">
              <!-- v-model 绑定选中的行 ID，label 为当前行的唯一标识（如 id） -->
              <el-radio
                v-model="selectedId"
                :label="scope.row.clientId"
                @change="handleRadioChange(scope.row)"
              ></el-radio>
            </template>
          </el-table-column>
          <el-table-column label="客户编码" align="center" prop="clientCode"/>
          <el-table-column label="客户名称" align="center" prop="clientName" width="150"/>
          <el-table-column label="客户简称" align="center" prop="clientNick"/>
          <el-table-column label="客户类型" align="center" prop="clientType"/>
          <el-table-column label="客户电话" align="center" prop="tel"/>
          <el-table-column label="联系人" align="center" prop="contact1"/>
          <el-table-column label="联系人电话" align="center" prop="contact1Tel"/>

        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="MdItemform.pageNum"
                    :limit.sync="MdItemform.pageSize" />

      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>


<script>
import {getMdItemList} from "../../../api/system/workorder";

export default {
  name: "mydialog2",
  data() {
    return {
      selectedId: null,
      selectedItem: null,
      open: true,
      deptName: undefined,
      total: 0,
      MdItemform: {
        pageNum: 1,
        pageSize: 10,
        clientCode: undefined,
        clientName: undefined,
        clientNick: undefined,
        clientEn: undefined,
        enableFlag: undefined,
        itemCode: undefined,
        itemName: undefined,
      },
      postList: [],
      tree: [],
    }
  },
  methods: {

    handleRadioChange(row) {
      console.log( row)
      this.selectedItem = row
    },
    submitForm() {
      this.$emit('submit2', this.selectedItem);
      this.$emit('dialog-closed2');  // 向父组件发送关闭通知
    },
    cancel() {
      this.$emit('dialog-closed2');  // 向父组件发送关闭通知
      this.reset()
    },
    handleQuery() {
    },
    resetQuery() {
      this.MdItemform={
        pageNum: 1,
        pageSize: 10,
        clientCode: undefined,
        clientName: undefined,
        clientNick: undefined,
        clientEn: undefined,
        enableFlag: undefined,
        itemCode: undefined,
        itemName: undefined,
      }
      this.getMdItemList()
    },
    handleSelectionChange(selection) {
    },
    handleClose() {
      this.$emit('dialog-closed2');  // 向父组件发送关闭通知
    },
    getMdItemList() {
      getMdItemList(this.MdItemform).then(res => {
        this.postList = res.data
        this.total = res.data.length
      })
    }
  },
  created() {
    this.getMdItemList()
  },
}
</script>

<style scoped>

</style>
